<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>把数据从父组件传给子组件</h3>
  

        <my-com1 :msg="msg"></my-com1>
        <my-com1 v-bind:msg="msg"></my-com1>
        
    </div>
    <script src="./vue.js"></script>
    <script>
    // 在子组件中，收到了父组件的数据.
    // 不能修改它！不能修改它！不能修改它！

    const vm = new Vue({
        el: '#app',
        data: {
            msg: '我是父组件的数据项'
        },
        
        components: {
            MyCom1: {
                
                props:["msg"],
                template: `
                    <div>
                        子组件名{{msg}}
                        <button @click="hClick">修改</button>
                    </div>`,
                methods: {
                    hClick () {
                        console.log( this.msg )
                        this.msg = 100
                    }
                }
            },
            
        }

    })
    </script>
</body>
</html>